import React, { useState } from 'react';
import { View, Text, TextInput, TouchableOpacity, StyleSheet, ScrollView } from 'react-native';
import { Picker } from '@react-native-picker/picker';
import { useRouter } from 'expo-router';
const Search = () => {
  const [searchText, setSearchText] = useState('');
  const [selectedOption, setSelectedOption] = useState('宠物');
  const [history, setHistory] = useState(['宠物', '店铺']);
  const router = useRouter();
  const handleSearch = () => {
    // Handle search logic here
    console.log('Search:', searchText);
  };

  return (
    <View style={styles.container}>
      <View style={styles.header}>
        <TouchableOpacity style={styles.backButton} onPress={() => console.log('Back button pressed')}>
          <Text onPress={()=>router.back()}>返回</Text>
        </TouchableOpacity>
        <Picker 
          selectedValue={selectedOption}
          onValueChange={(itemValue) => setSelectedOption(itemValue)}
          style={styles.picker}
        >
          <Picker.Item label="宠物" value="宠物" />
          <Picker.Item label="店铺" value="店铺" />
        </Picker>
        <TextInput
          style={styles.searchInput}
          placeholder="请输入关键字"
          value={searchText}
          onChangeText={setSearchText}
        />
        <TouchableOpacity style={styles.searchButton} onPress={handleSearch}>
          <Text>搜索</Text>
        </TouchableOpacity>
      </View>
      <ScrollView contentContainerStyle={styles.content}>
        <View style={styles.history}>
          <Text style={styles.historyTitle}>大家都在搜</Text>
          <View style={styles.historyItems}>
            {history.map((item, index) => (
              <TouchableOpacity key={index} style={styles.historyItem}>
                <Text>{item}</Text>
              </TouchableOpacity>
            ))}
          </View>
        </View>
        <View style={styles.history}>
          <Text style={styles.historyTitle}>历史搜索</Text>
          <View style={styles.historyItems}>
            {history.map((item, index) => (
              <TouchableOpacity key={index} style={styles.historyItem}>
                <Text>{item}</Text>
              </TouchableOpacity>
            ))}
          </View>
        </View>
      </ScrollView>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
  header: {
    flexDirection: 'row',
    alignItems: 'center',
    padding: 10,
    borderBottomWidth: 1,
    borderColor: '#ddd',
  },
  backButton: {
    marginRight: 10,
  },
  picker: {
    flex: 1,
    // height: 40,
    borderWidth: 1,
    borderColor: '#ddd',
    borderRadius: 20,
    paddingLeft: 10,
  },
  searchInput: {
    flex: 1,
    height: 40,
    borderWidth: 1,
    borderColor: '#ddd',
    borderRadius: 20,
    paddingLeft: 10,
  },
  searchButton: {
    marginLeft: 10,
    backgroundColor: '#ff6b6b',
    padding: 10,
    borderRadius: 20,
  },
  content: {
    padding: 5,
  },
  history: {
    marginBottom: 1,
  },
  historyTitle: {
    fontSize: 18,
    fontWeight: 'bold',
    marginBottom: 10,
  },
  historyItems: {
    flexDirection: 'row',
    flexWrap: 'wrap',
  },
  historyItem: {
    margin: 5,
    padding: 10,
    backgroundColor: '#f0f0f0',
    borderRadius: 20,
  },
});

export default Search;